<template>
  <div class="chart">
    <!-- 图表内容，显示相似k线 -->
    <div class="chartContent" ref="myChart"></div>

    <!-- 图表底部，显示图表日期 -->
    <div class="chartFooter">
      <div class="date">
        <span>{{startDate1}}</span>
        <span>{{similarStock.stockName}}</span>
        <span class="endDate1">{{endDate1}}</span>
      </div>
      <div class="date">
        <span></span>
        <span>{{endDate2}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/candlestick'
  import 'echarts/lib/chart/line'

  export default {
    data () {
      return {
        myChart: {},
        isRender: false
      }
    },
    props: {
      similarStock: {
        type: Object
      },
      isShare: {
        type: Boolean
      }
    },
    computed: {
      startDate1 () {
        return this.similarStock.timeData1[0]
      },
      endDate1 () {
        return this.similarStock.timeData1[this.similarStock.timeData1.length - 1]
      },
      endDate2 () {
        return this.similarStock.timeData2[this.similarStock.timeData2.length - 1]
      }
    },
    watch: {

    },
    mounted () {
      this.initChart()
      window.addEventListener('scroll', this.initChart)
    },
    beforeDestroy () {
      if (this.myChart !== {} && this.myChart.isDisposed === false) {
        this.myChart.dispose()
      }
      window.removeEventListener('scroll', this.initChart)
    },
    activated () {
      window.addEventListener('scroll', this.initChart)
    },
    deactivated () {
      window.removeEventListener('scroll', this.initChart)
    },
    methods: {
      initChart () {
        if (this.$refs.myChart !== undefined) {
          if (this.$refs.myChart.getBoundingClientRect().top <= document.documentElement.clientHeight && this.isRender === false) {
            this.myChart = echarts.init(this.$refs.myChart)
            let newOption = {
              grid: [
                {
                  show: true,
                  left: 0,
                  top: 0,
                  width: '50%',
                  height: '100%',
                  backgroundColor: '#fff8ec',
                  borderColor: 'transparent',
                  borderWidth: 0
                },
                {
                  show: true,
                  left: '50%',
                  top: 0,
                  width: '50%',
                  height: '100%',
                  backgroundColor: '#fff',
                  borderColor: 'transparent',
                  borderWidth: 0
                }
              ],
              xAxis: [
                {
                  show: false,
                  data: this.similarStock.timeData1
                },
                {
                  show: false,
                  gridIndex: 1,
                  data: this.similarStock.timeData2
                }
              ],
              yAxis: [
                {
                  show: false,
                  max: this.similarStock.max,
                  min: this.similarStock.min
                },
                {
                  show: false,
                  gridIndex: 1,
                  max: this.similarStock.max,
                  min: this.similarStock.min
                }
              ],
              series: [
                {
                  data: this.similarStock.kData1,
                  type: 'candlestick',
                  barMaxWidth: 8,
                  itemStyle: {
                    normal: {
                      color: '#eb333b',
                      color0: '#1aae52',
                      borderColor: '#eb333b',
                      borderColor0: '#1aae52'
                    }
                  }
                },
                {
                  xAxisIndex: 1,
                  yAxisIndex: 1,
                  data: this.similarStock.kData2,
                  type: 'candlestick',
                  barMaxWidth: 8,
                  itemStyle: {
                    normal: {
                      color: '#eb333b',
                      color0: '#1aae52',
                      borderColor: '#eb333b',
                      borderColor0: '#1aae52'
                    }
                  }
                }
              ]
            }
            this.myChart.setOption(newOption)
            this.isRender = true
          }
        }
      },
      toStock (stockCode) {
        if (this.isShare) {
          this.$store.dispatch('setTip', {text: '下载君弘获取股票实时行情吧'})
        } else {
          window.location.href = '@min=' + stockCode
        }
      }
    }
  }
</script>

<style scoped lang="less">
  * {
    margin: 0;
    padding: 0;
  }

  /* 图表内容，显示相似k线 */
  .chartContent {
    height: 220px;
  }

  /* 图表底部，显示图表日期 */
  .chartFooter {
    padding: 0 30px;
    height: 30px;
    box-sizing: border-box;
    display: flex;
    background-color: #fff;
    box-shadow: inset 0 -1px 0 0 rgba(234,234,234,0.5);
    .date {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      color: #999;
      .endDate1 {
        padding-right: 8px;
      }
    }
  }

  /* 图表间隔 */
  .interval {
    height: 14px;
    background: #f6f6f6;
  }
</style>
